<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/内嵌视频.css" />
    <style>
      div {
        width: 1000px;
        height: 900px;
        margin: 0 220px;
        margin-top: 30px;
      }
      iframe {
        margin-top: 20px;
        width: 1000px;
        height: 550px;
      }
      .name {
        font-size: 1.5rem;
      }
      .xuanji {
        height: 540px;
        width: 100px;
        position: absolute;
        right: 70px;
        top: 95px;
        /* background-color: red; */
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        border: 1px solid;
        background-color: rgb(218, 218, 218);
        -moz-box-shadow: 2px 2px 5px #333333;
        -webkit-box-shadow: 2px 2px 5px #333333;
        box-shadow: 2px 2px 5px #333333;
      }
      .xuanji > div {
        width: 80px;
        height: 40px;
        /* background-color: aqua; */
        margin: 10px;
        border-radius: 10px;
        /* border: 1px solid; */
        -moz-box-shadow: 2px 2px 5px #333333;
        -webkit-box-shadow: 2px 2px 5px #333333;
        box-shadow: 2px 2px 5px #333333;
      }
      .xuanji > div {
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
      .xuanji > div:hover {
        background-color: rgb(94, 129, 198);
      }
      .xuanzhong {
        background-color: rgb(94, 129, 198);
      }
    </style>
  </head>

  <body>
    <div>
      <span class="name">一周刷完高职高专英语三级A级3500单词绿色护眼回音版</span
      ><br />
      <span class="year">2021-04-04</span>
      <iframe
        src="https://player.bilibili.com/player.html?isOutside=true&aid=289941840&bvid=BV18f4y1W7Go&cid=319691102&p=1"
        ,
        ,
        height="100%"
        width="100%"
        scrolling="no"
        allowfullscreen="true"
        frameborder="no"
        allowtransparency="yes"
      ></iframe>
      <div class="xuanji">
        <div class="xuanzhong">第一集</div>
        <div>第二集</div>
        <div>第三集</div>
        <div>第四集</div>
        <div>第五集</div>
        <div>第六集</div>
        <div>第七集</div>
      </div>

      <script>
        let xuanji = [
          "https://player.bilibili.com/player.html?isOutside=true&aid=289941840&bvid=BV18f4y1W7Go&cid=319691102&p=1",
          "https://player.bilibili.com/player.html?isOutside=true&aid=289941840&bvid=BV18f4y1W7Go&cid=320705386&p=2",
          "https://player.bilibili.com/player.html?isOutside=true&aid=289941840&bvid=BV18f4y1W7Go&cid=323681362&p=3",
          "https://player.bilibili.com/player.html?isOutside=true&aid=289941840&bvid=BV18f4y1W7Go&cid=323681532&p=4",
          "https://player.bilibili.com/player.html?isOutside=true&aid=289941840&bvid=BV18f4y1W7Go&cid=323681641&p=5",
          "https://player.bilibili.com/player.html?isOutside=true&aid=289941840&bvid=BV18f4y1W7Go&cid=323681701&p=6",
          "https://player.bilibili.com/player.html?isOutside=true&aid=289941840&bvid=BV18f4y1W7Go&cid=362159345&p=7",
        ];

        let bofang = document.querySelector("iframe");
        let dizhi;
        for (i = 0; i < xuanji.length; i++) {
          let index = i;
          document
            .querySelector(`.xuanji>div:nth-child(${i + 1})`)
            .addEventListener("click", function () {
              bofang.src = xuanji[index];
              document
                .querySelector(".xuanzhong")
                .classList.remove("xuanzhong");
              this.classList.add("xuanzhong");
            });
        }
      </script>
    </div>
  </body>
</html>
